import {
    API
} from "../../../utils/fireapi.js";
import {
    Utils
} from "../../../utils/util";
const app = getApp()
Page({
    data: {
        // 从cropper界面接收的待裁剪的原始图片
        sourceImg: "https://scpic.chinaz.net/files/pic/pic9/201311/apic2098.jpg",
        // 图片旋转角度,默认为0,每旋转一次增加45度
        angle: 0,
        // 旋转 裁剪 翻转 按钮的定义(图标,文字)
        footerBtns: {
            width: "60rpx",
            height: "88rpx",
            list: [{
                id: 1,
                icon: {
                    type: 'text',
                    path: "cicon-refresh"
                },
                text: "旋转",
            },
            {
                id: 2,
                icon: {
                    type: 'text',
                    path: "cicon-crop"
                },
                text: "裁剪",
            },
            {
                id: 3,
                icon: {
                    type: 'text',
                    path: "cicon-sync-alt"
                },
                text: "翻转",
            },
            ],
        },
        //裁剪功能明细按钮(自由裁剪\原图比例\规格裁剪\图形裁剪)的定义(图标,文字)
        cutBtns: {
            width: "114rpx",
            height: "86rpx",
            list: [{
                id: 1,
                icon: {
                    type: "text",
                    path: "cicon-circle-o"
                },
                text: "自由裁剪",
            },
            {
                id: 2,
                icon: {
                    type: "text",
                    path: "cicon-fullscreen"
                },
                text: "原图比例",
            },
            {
                id: 3,
                icon: {
                    type: "text",
                    path: "cicon-subtitles-o"
                },
                text: "规格裁剪",
            },
            {
                id: 4,
                icon: {
                    type: "text",
                    path: "cicon-star-o"
                },
                text: "图形裁剪",
            },
            ],
        },
        // 规格裁剪明细按钮定义
        specBtns: {
            width: "98rpx",
            height: "70rpx",
            list: [{
                icon: {
                    type: "text",
                    path: "_icon-more"
                },
                text: "",
                type: 1, // 更多尺寸按钮
            },],
        },
        // 图形裁剪明细按钮定义
        graphBtns: {
            width: "80rpx",
            height: "82rpx",
            list: [{
                id: 1,
                icon: {
                    type: "text",
                    path: "iconfont icon-triangle"
                },
                text: "三角形",
            },
            {
                id: 2,
                icon: {
                    type: "text",
                    path: "iconfont icon-pentagon"
                },
                text: "五边形",
            },
            {
                id: 3,
                icon: {
                    type: "text",
                    path: "iconfont icon-hexagon"
                },
                text: "六边形",
            },
            {
                id: 4,
                icon: {
                    type: "text",
                    path: "iconfont icon-heart"
                },
                text: "心形",
            },
            ],
        },
        // 控制各个明细菜单的显示
        showCutMenu: false,
        showSpecMenu: false,
        showGraphMenu: false,

        // 裁剪功能组件
        cropComp: undefined,
        // 翻转控制标识
        voerturn: 0,
        // 照片尺寸类型
        sizetypes: [],
        // 普通照片尺寸,5寸6寸等
        normalPhotos: [],
        // 显示更多尺寸弹窗
        showSizesModal: false,
        // 控制撤销和重做按钮状态
        canPre: false,
        canNext: false,

    },
    // 通过API从后端获取所有尺寸
    loadSizeType() {
        // API.getAllSizeTypes().then(res => {
        let normalPhotoSizeList = []; // 常用证件照
        let allSizes = [] // 所有照片尺寸
        const categorys = app.globalData.serverData.categorys
        categorys.forEach((sizetype) => {
            let photos = sizetype.photos;
            // 过滤出所有常用的证件照尺寸(is_common字段)
            let temp = photos.filter((item) => item.is_idphoto == false);
            normalPhotoSizeList.push(...temp);
            // 按照尺寸id升序排序
            normalPhotoSizeList.sort(function (a, b) {
                return a.id - b.id;
            });

            // 将每个类别中的尺寸合并到总尺寸中(allSizes)
            allSizes.push(...photos);

        });
        // 如果能够取到证件照尺寸,则设置第一个尺寸为默认选中的证件照尺寸
        if (normalPhotoSizeList.length) {
            this.setData({
                sizetypes: categorys,
                normalPhotos: normalPhotoSizeList.slice(0, 3), // 只取前4个common证件照尺寸
            })
        } else {
            this.setData({
                sizetypes: categorys,
                normalPhotos: allSizes.slice(0, 3), // 只取前4个common证件照尺寸
            })
        }
        this.initSpecBtn();
        // }).catch((err) => {
        //     console.log("err",err)
        //     this.showError({title: err,icon: 'error',duration: 2000,mask: true});
        // });
    },
    // 设置规格裁剪按钮
    initSpecBtn() {
        // 设置规格裁剪按钮
        let specBtns = []
        // 生成规格裁剪按钮结构
        this.data.normalPhotos.forEach(elem => {
            specBtns.push({
                "icon": "",
                "text": elem.name,
                "size": elem,
                type: 0, // 尺寸按钮
            })
        })
        // 将更多按钮写入
        specBtns.push(...this.data.specBtns.list);
        // 初始化规格裁剪按钮
        this.setData({
            "specBtns.list": specBtns
        });
    },
    // 规格裁剪事件函数,todo:按实际规格设置裁剪组件的裁剪框
    specItemClick(event) {
        let btnInfo = event.detail.info;
        if (btnInfo.type == 0) {
            // 普通照片尺寸按钮被点击
            let ratio = btnInfo.size.height / btnInfo.size.width; // 示例
            // initCropbox(参数1,参数2),参数1:裁剪框类型,参数2:边长比例
            this.data.cropComp.initCropbox(3, ratio);
        } else if (btnInfo.type == 1) {
            // 更多图片尺寸按钮被点击
            this.setData({
                showSizesModal: true
            })
            // this.selectComponent('#more-size-dlg').showFrame();
            this.selectComponent('#select-size').clearSelectedSize();
        }
    },
    // 更多尺寸弹窗确定按钮被点击
    onSelectedSize(e) {

        if (e.detail.confirm) {
            let size = this.selectComponent('#select-size').getSelectedSize();
            if (size) {
                this.data.cropComp.initCropbox(3, size.height / size.width);
                this.setData({
                    showSizesModal: false
                });
            }
        } else {
            this.setData({
                showSizesModal: false
            });
        }
    },
    // 更多尺寸弹窗取消按钮被点击
    onCancle() {
        this.setData({
            showSizesModal: false
        })
    },
    // 图形裁剪事件函数(initCropbox(参数1,参数2),参数1:裁剪框类型,参数2:裁剪框形状)
    graphItemClick(event) {
        let id = event.detail.info.id;
        if (id === 1) {
            this.data.cropComp.initCropbox(2, 3); // 三角形裁剪框
        } else if (id === 2) {
            this.data.cropComp.initCropbox(2, 5); // 五边形裁剪框
        } else if (id === 3) {
            this.data.cropComp.initCropbox(2, 6); // 六边形裁剪框
        } else if (id === 4) {
            this.data.cropComp.initCropbox(5); // 心形裁剪框
        }
    },
    // 旋转 裁剪  翻转按钮点击事件接收函数
    footerItemClick(event) {
        let id = event.detail.info.id;
        if (id === 1) {
            // 旋转按钮被点击,每次增加旋转45度
            this.data.cropComp.rotate();
        } else if (id === 2) {
            // 裁剪按钮被点击
            this.setData({
                showCutMenu: !this.data.showCutMenu,
            })
        } else if (id === 3) {
            // 水平翻转按钮被点击
            this.data.cropComp.overturn(0);
        }

    },
    // 裁剪功能明细按钮点击接收事件
    cutItemClick(event) {
        // 新代码
        let showSpecMenu = false;
        let showGraphMenu = false;
        const id = event.detail.info.id;
        if (id === 1) {
            // 自由裁剪
            this.data.cropComp.initCropbox(1);
        } else if (id === 2) {
            // 原图比例裁剪
            this.data.cropComp.initCropbox(4);
        } else if (id === 3) {
            showSpecMenu = true;
        } else if (id === 4) {
            showGraphMenu = true;
        }
        this.setData({
            showSpecMenu: showSpecMenu,
            showGraphMenu: showGraphMenu
        })
    },
    // 接收
    stateChange(e) {
        const state = e.detail;
        this.setData({
            canPre: state.pre,
            canNext: state.next
        })
    },
    // 裁剪图片,并将裁剪后图片返回上一页面
    clip() {
        this.data.cropComp.clipImage().then(res => {
            const pages = getCurrentPages();
            const prePage = pages[pages.length - 2];
            prePage.setData({
                sourceImg: res
            });
            wx.navigateBack({
                delta: 1
            })

        })
    },
    // 点击取消按钮,返回上一页面
    goBack() {
        wx.navigateBack({
            delta: 1
        })
    },
    goPre() {
        if (this.data.canPre) {
            this.data.cropComp.redo(-1);
        }
    },
    goNext() {
        if (this.data.canNext) {
            this.data.cropComp.redo(1);
        }
    },

    onLoad(options) {
        // // 加载照片尺寸数
        this.loadSizeType();
        if (options && options.img) {

            const img = JSON.parse(options.img);
            this.setData({
                sourceImg: img,
            })
        }

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        this.data.cropComp = this.selectComponent("#cropper");
    },


})